<template>
	<div style="display: flex; align-items: center; gap: 4px;">
		<el-input v-model="weight" @input="inputEmit" style="flex: 1;" clearable :class="inputClass">
			<template slot="append">Kg</template>
		</el-input>
		<el-tooltip
			v-if="!serialObject.support"
			effect="light"
			:content="
				$tt(isHttps ? 'label_serial_port_not_support' : 'label_auto_weight_only_https')
			"
			placement="top-start"
		>
			<div style="width:30px;height:30px;" class="flex_center">
				<i class="el-icon-warning-outline color_danger bold" style="font-size: 16px;  "></i>
			</div>
		</el-tooltip>
		<el-tooltip
			v-else-if="isOpening"
			effect="light"
			:content="$tt('label_auto_weight_connect_ing')"
			placement="top-start"
			><div style="width:30px;height:30px;" class="flex_center">
				<i class="el-icon-loading color_primary" style="font-size: 16px; "></i>
			</div>
		</el-tooltip>
		<!-- 连接电子称 -->
		<el-tooltip
			v-else-if="!isConnected"
			effect="light"
			:content="$tt('label_auto_weight_connect_digital')"
			placement="top-start"
			><div
				style="width:30px;height:30px;cursor: pointer;"
				class="flex_center"
				@click="dialogSeletType = true"
			>
				<i class="el-icon-connection color_info" style="font-size: 16px; "></i>
			</div>
		</el-tooltip>

		<!-- 已连接 -->
		<el-popover v-else-if="isConnected" placement="top" width="auto" trigger="hover">
			<div style="text-align: center; ">
				<!-- 电子称已连接 -->
				<div style="font-size: 14px;  " class="color_success mg_t1">
					{{ $tt('label_auto_weight_has_connected') }}
				</div>
				<div
					style="font-size: 12px;  "
					:class="lastMonitorTime ? 'color_success' : 'color_info'"
				>
					{{ $tt('label_sync_time') }}：
					<span>{{ lastMonitorTime ? lastMonitorTime : $t('data_temp_none') }}</span>
				</div>
				<div>
					<!-- 断开连接 -->
					<el-button type="text" icon="el-icon-close" @click="disconnect">
						{{ $tt('label_auto_weight_disconnect') }}
					</el-button>
				</div>
			</div>
			<div
				slot="reference"
				style="width:30px;height:30px;cursor: pointer;"
				class="flex_center"
			>
				<i class="el-icon-connection color_success bold" style="font-size: 16px; "></i>
			</div>
		</el-popover>

		<el-dialog
			:title="$t('label_auto_weight_connect_digital')"
			:visible.sync="dialogSeletType"
			width="540px"
			append-to-body
		>
			<div class="mg_1">
				<!-- 电子称型号 -->
				<div>{{ $tt('label_auto_weight_digital_type') }}</div>
				<ex_select_auto class="mg_v1 w_fill" v-model="type" :items="options" />
				<div class="mg_v1 w_fill" style="text-align: right;">
					<!-- 确定连接 -->
					<el-button
						type="primary"
						@click="readyPortMonitor(null, true)"
						icon="el-icon-connection"
					>
						{{ $tt('label_auto_weight_sure_connect') }}
					</el-button>
				</div>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import serial_manage from './serial_manage.js'
// ----------------------------------------------------
// --------- 其他型号的电子称，以类似方法新增 js 类 ---------
// ----------------------------------------------------

// cas db1/h 型号电子称

// cas db1/h 型号电子称

import Vue from 'vue'

export default {
	name: 'auto_weight_input',

	data() {
		return {
			serialObject: serial_manage.serialObject,
			isHttps: window.location.protocol.startsWith('https'),

			serialKey: null,
			options: serial_manage.protocols,
			type: null,
			dialogSeletType: false,

			inputClass: 'none-shanshuo',

			weight: null,
			stableWeight: null,
			stableTime: 0,
			lastMonitorTime: null
		}
	},

	props: {
		value: null
	},
	computed: {
		isConnected() {
			return serial_manage.isConnected()
		},
		isOpening() {
			return serial_manage.isOpening()
		}
	},
	created() {
		this.serialKey = serial_manage.addObserver(this)

		this.type = serial_manage.serialObject.type

		if (this.isConnected || this.isOpening) {
			return
		}

		// 刷新浏览器后的自动连接处理

		let config = serial_manage.getConfig()
		if (config && config.type) {
			this.type = config.type
			serial_manage.autoLink(config)
		}

		if (!this.type) this.type = this.options[0].value
	},
	

	destroyed() {
		serial_manage.removeObserver(this.serialKey)
	},

	watch: {
		value(val, old) {
			this.weight = val
		}
	},
	methods: {
		inputEmit(e){
			this.$emit('input', e)

		},
		updateSerial(obj) {
			this.$set(this, 'serialObject', _.clone(obj))
			if (this.isConnected) {
				this.inputClass = 'shanshuo'
			} else {
				this.inputClass = 'none-shanshuo'
				this.lastMonitorTime = null
			}
		},
		monitor(decodeValue, decodeBool) {
			const now = new Date().getTime()
			this.lastMonitorTime = this.$dateFormat(now, 'HH:mm:ss')
			if (decodeBool) {
				this.weight = decodeValue
				if (decodeValue != this.stableWeight) {
					this.stableWeight = decodeValue
					this.stableTime = now
				} else if (now - this.stableTime >= 1500 && Number(this.stableWeight) > 0) {
					this.$emit('stableValue', this.stableWeight)
					console.log('stableValue', this.stableWeight)
					this.stableWeight = null
				}
				this.$emit('input', decodeValue)
			} else {
			}
		},
		async readyPortMonitor(info, select) {
			if (serial_manage.readyPortMonitor(info, this.type, select)) {
				this.dialogSeletType = false
			}
		},

		disconnect() {
			serial_manage.close()
			serial_manage.setLinkAuto(false)
		}
	}
}
</script>

<style>
.shanshuo input {
	animation: shimmer 0.5s infinite;
}
.none-shanshuo input {
	animation: none;
}
@keyframes shimmer {
	0% {
		color: #606266;
	}
	40% {
		color: #606266;
	}
	50% {
		color: transparent;
	}
	60% {
		color: #606266;
	}
	100% {
		color: #606266;
	}
}
</style>
